<div id="PingmcContainer">
    <p>
        <b>配置此项目，可以让你正常监听到 Minecraft 服务端的运行状态与玩家人数。</b>
    </p>
    <p>数据每隔 10 秒刷新缓存。</p>
    <div class="input-group input-group-sm">
        <span class="input-group-addon" id="sizing-addon3">服务器名称</span>
        <input type="text" class="form-control" placeholder="选填，默认是 Minecraft Server，推荐自己取名"
            aria-describedby="sizing-addon3" v-model="mcpingName">
    </div>
    <div class="input-group input-group-sm">
        <span class="input-group-addon" id="sizing-addon3">域名或IP地址</span>
        <input type="text" class="form-control" placeholder="选填，默认是 localhost，不推荐修改" aria-describedby="sizing-addon3"
            v-model="mcpingHost">
    </div>
    <div class="input-group input-group-sm">
        <span class="input-group-addon" id="sizing-addon3">服务端端口</span>
        <input type="text" class="form-control" placeholder="选填，为空则自动，取自 server.properties 文件"
            aria-describedby="sizing-addon3" v-model="mcpingPort">
    </div>

    <div class="input-group input-group-sm">
        <span class="input-group-addon" id="sizing-addon3">自定义 Motd</span>
        <input type="text" class="form-control" placeholder="选填，不填写则获取 motd" aria-describedby="sizing-addon3"
            v-model="mcpingMotd">
    </div>

    <div class="PanelBody">
        <p><b>对外公开常用功能</b></p>
        <div class="PanelItem">
            <span class="glyphicon glyphicon-barcode" aria-hidden="true"> </span>
            <span v-on:click="toAPI_JSON()">格式 JSON | API 接口</span>
        </div>
        <!-- <div class="PanelItem">
            <span class="glyphicon glyphicon-picture" aria-hidden="true"> </span>
            <span v-on:click="toAPI_PAGE()">贴图系统 Beta</span>
        </div> -->
    </div>
    <p style="color: rgb(230, 55, 55);">保存或更新配置内容后，需要重启 Minecraft 服务器，才可使用。</p>
    <button class="btn btn-success" v-on:click="ok()">
        保存配置
    </button>
    &nbsp;|&nbsp;
    <button class="btn btn-danger" v-on:click="TOOLS.popWindClose();">
        返回
    </button>
</div>
<script>
    WS.sendMsg('mcping/config', PAGE.listenServername, function (obj) {
        var remoteMCPingConfig = obj.ResponseValue;
        new Vue({
            el: "#PingmcContainer",
            data: {
                mcpingName: remoteMCPingConfig.mcpingName || "",
                mcpingHost: remoteMCPingConfig.mcpingHost || "",
                mcpingPort: remoteMCPingConfig.mcpingPort || "",
                mcpingMotd: remoteMCPingConfig.mcpingMotd || ""
            },
            methods: {
                ok: function () {
                    WS.sendMsg('mcping/config_save', JSON.stringify({
                        mcpingServerName: PAGE.listenServername,
                        mcpingConfig: {
                            mcpingName: this.mcpingName.trim() || "Minecraft Server",
                            mcpingHost: this.mcpingHost.trim() || "localhost",
                            mcpingPort: this.mcpingPort.trim() || "",
                            mcpingMotd: this.mcpingMotd.trim() || ""
                        }
                    }));
                    TOOLS.popWindClose();
                },
                toAPI_JSON: function () {
                    window.open("/api/status/" + PAGE.listenServername);
                },
                toAPI_PAGE: function () {
                    window.open("/api/status/" + PAGE.listenServername);
                },
            }
        });
    });


</script>